<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <div class="header-left">
          <img src="../assets/images/logo.png" class="logo" />
        </div>
        <div class="header-right">
          <span>{{ currentTime }}</span>
          <!-- 刷新 -->
          <img src="../assets/images/刷新.png" class="res" @click="refreshPage" />
          <!-- 用户名和图标 -->
          <div><img src="../assets/images/用户.png" class="user" alt="" />{{ user.userName }}</div>
          <!-- 退出按钮 -->
          <img src="../assets/images/退出.png" @click="goback" class="exit" />
        </div>
      </el-header>
      <el-container class="container">
        <el-aside width="200px">
          <el-col :span="24">
            <el-menu
              class="el-menu-vertical-demo"
              router
              :unique-opened="true"
              :default-active="$route.path"
            >
              <el-menu-item
                index="/allTotal/HelloWorld"
                @click="changeIndex('HelloWorld')"
                v-if="role == '4'"
              >
                <img :src="getSrc('HelloWorld')" class="banji" /><span>首页</span>
              </el-menu-item>
              <el-menu-item
                class="classone"
                index="/allTotal/Class"
                @click="changeIndex('Class')"
                v-if="role == '1' || role == '2' || role == '3' || role == '5'"
              >
                <img :src="getSrc('Class')" class="banji" /><span>班级管理</span>
              </el-menu-item>
              <el-sub-menu index="Daily">
                <template #title>
                  <img :src="getSrc('Daily')" alt="" class="richang" />
                  <span @click="fun" class="day">日常</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item
                    index="/allTotal/Business"
                    v-if="role == '1' || role == '2' || role == '3' || role == '5'"
                    >出差记录</el-menu-item
                  >
                  <el-menu-item index="/allTotal/Leave">请假记录</el-menu-item>
                  <el-menu-item index="/allTotal/Work">考勤统计</el-menu-item>
                </el-menu-item-group>
              </el-sub-menu>
              <el-menu-item
                index="/allTotal/User"
                @click="changeIndex('User')"
                v-if="role == '1' || role == '2'"
              >
                <img :src="getSrc('User')" class="yonghu" />
                <span>用户管理</span>
              </el-menu-item>
              <el-menu-item
                class="one"
                index="/allTotal/StudentFiles"
                @click="changeIndex('StudentFiles')"
                v-if="role == '1' || role == '2' || role == '5'"
              >
                <img :src="getSrc('StudentFiles')" class="student" />
                <span>学生档案</span>
              </el-menu-item>
              <el-menu-item
                index="/allTotal/Log"
                @click="changeIndex('Log')"
                v-if="role == '1' || role == '2' || role == '4'"
              >
                <img :src="getSrc('Log')" class="rizhi" />
                <span>日志系统</span>
              </el-menu-item>
              <el-menu-item
                index="/allTotal/StudentLog"
                @click="changeIndex('StudentLog')"
                v-if="role == '3' || role == '5'"
              >
                <img :src="getSrc('StudentLog')" class="rizhi" />
                <span>学生日志管理</span>
              </el-menu-item>
              <el-menu-item
                index="/allTotal/Examine"
                @click="changeIndex('Examine')"
                v-if="role == '1' || role == '2' || role == '3'"
              >
                <img :src="getSrc('Examine')" class="shenhe" />
                <span>审核系统</span>
              </el-menu-item>
              <el-menu-item
                index="/allTotal/StudentLeave"
                @click="changeIndex('StudentLeave')"
                v-if="role == '3'"
              >
                <img :src="getSrc('StudentLeave')" class="shenhe" />
                <span>学生请假记录</span>
              </el-menu-item>
              <el-menu-item
                class="projectone"
                index="/allTotal/Project"
                @click="changeIndex('Project')"
                v-if="user.roleId != '5'"
              >
                <img :src="getSrc('Project')" class="xiangmu" />
                <span>项目管理</span>
              </el-menu-item>
              <el-menu-item
                index="/allTotal/Department"
                @click="changeIndex('Department')"
                v-if="role == '1' || role == '2'"
              >
                <img :src="getSrc('Department')" class="xiangmu" />
                <span>部门管理</span>
              </el-menu-item>
              <el-menu-item
                index="/allTotal/Subject"
                @click="changeIndex('Subject')"
                v-if="role == '1' || role == '2'"
              >
                <img :src="getSrc('Subject')" class="xiangmu" />
                <span>学科管理</span>
              </el-menu-item>
              <el-sub-menu index="1" v-if="role == '1' || role == '2' || role == '5'">
                <template #title>
                  <img :src="getSrc('Sale')" alt="" class="richang" />
                  <span @click="fun1" class="day">销售管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/allTotal/SalesStatistics">销售统计</el-menu-item>
                  <el-menu-item index="/allTotal/StudentData">学生数据</el-menu-item>
                  <el-menu-item index="/allTotal/ExcelData">批量录入</el-menu-item>
                </el-menu-item-group>
              </el-sub-menu>
              <el-menu-item
                index="/allTotal/System"
                @click="changeIndex('System')"
                v-if="user.roleId != '4'"
              >
                <img :src="getSrc('System')" class="xiangmu" />
                <span>系统设置</span>
              </el-menu-item>
              <el-menu-item
                index="/allTotal/SInformation"
                @click="changeIndex('SInformation')"
                v-if="user.roleId == '4'"
              >
                <img :src="getSrc('SInformation')" class="xiangmu" />
                <span>个人信息</span>
              </el-menu-item>
            </el-menu>
          </el-col>
        </el-aside>
        <el-main>
          <RouterView />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
  
  
  <script setup>
import { useRouter } from 'vue-router'
import { ref } from 'vue'
import { onMounted } from 'vue'
import { onUnmounted } from 'vue'

// 获取本地username和role的值
const user = JSON.parse(localStorage.getItem('user'))
//角色
const role = user.roleId

const router = useRouter()

//时间计时器
const currentTime = ref('')
const intervalId = ref(null)
const updateTime = () => {
  const now = new Date()
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  const hours = String(now.getHours()).padStart(2, '0')
  const minutes = String(now.getMinutes()).padStart(2, '0')
  const seconds = String(now.getSeconds()).padStart(2, '0')
  currentTime.value = `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`
}
onMounted(() => {
  updateTime()
  intervalId.value = setInterval(updateTime, 100)
  
})
onUnmounted(() => {
  clearInterval(intervalId.value)
})
//刷新
const refreshPage = () => {
  window.location.reload()
}
function fun() {
  if (role == '1' || role == '2' || role == '3') {
    router.push('Daily')
  }
  //找到所有的.el-menu.el-sub-menu.is-opened
  if (activeIndex.value == 'Daily') {
    changeIndex('')
  } else {
    changeIndex('Daily')
  }

  //寻找所有的.el-menu .el-menu-item.is-active
  let active = document.querySelector('.el-menu .el-menu-item.is-active')
  if (active) {
    active.classList.remove('is-active')
  }
}

function fun1() {
  //找到所有的.el-menu.el-sub-menu.is-opened
  if (activeIndex.value == 'Sale') {
    changeIndex('')
  } else {
    changeIndex('Sale')
  }

  //寻找所有的.el-menu .el-menu-item.is-active
  let active = document.querySelector('.el-menu .el-menu-item.is-active')
  if (active) {
    active.classList.remove('is-active')
  }
}

//去更改照片
const iconMap = {
  HelloWorld: {
    default: new URL('../assets/images/首页黑.png', import.meta.url).href,
    active: new URL('../assets/images/首页蓝.png', import.meta.url).href,
  },
  Class: {
    default: new URL('../assets/images/班级管理.png', import.meta.url).href,
    active: new URL('../assets/images/班级管理蓝.png', import.meta.url).href,
  },
  Daily: {
    default: new URL('../assets/images/日常黑.png', import.meta.url).href,
    active: new URL('../assets/images/日常蓝.png', import.meta.url).href,
  },
  User: {
    default: new URL('../assets/images/用户管理黑u.png', import.meta.url).href,
    active: new URL('../assets/images/用户管理蓝.png', import.meta.url).href,
  },
  StudentFiles: {
    default: new URL('../assets/images/学生档案.png', import.meta.url).href,
    active: new URL('../assets/images/学生档案蓝.png', import.meta.url).href,
  },
  Log: {
    default: new URL('../assets/images/日志系统黑.png', import.meta.url).href,
    active: new URL('../assets/images/日志系统蓝.png', import.meta.url).href,
  },
  Examine: {
    default: new URL('../assets/images/审核系统黑.png', import.meta.url).href,
    active: new URL('../assets/images/审核系统蓝.png', import.meta.url).href,
  },
  Project: {
    default: new URL('../assets/images/项目管理黑.png', import.meta.url).href,
    active: new URL('../assets/images/项目管理蓝.png', import.meta.url).href,
  },
  Department: {
    default: new URL('../assets/images/部门管理.png', import.meta.url).href,
    active: new URL('../assets/images/部门管理蓝.png', import.meta.url).href,
  },
  Subject: {
    default: new URL('../assets/images/学科管理.png', import.meta.url).href,
    active: new URL('../assets/images/学科管理蓝.png', import.meta.url).href,
  },
  Sale: {
    default: new URL('../assets/images/sale.png', import.meta.url).href,
    active: new URL('../assets/images/sale1.png', import.meta.url).href,
  },
  System: {
    default: new URL('../assets/images/系统设置黑.png', import.meta.url).href,
    active: new URL('../assets/images/系统设置蓝.png', import.meta.url).href,
  },
  StudentLeave: {
    default: new URL('../assets/images/Sleave.png', import.meta.url).href,
    active: new URL('../assets/images/Sleave1.png', import.meta.url).href,
  },
  StudentLog: {
    default: new URL('../assets/images/日志系统黑.png', import.meta.url).href,
    active: new URL('../assets/images/日志系统蓝.png', import.meta.url).href,
  },
  SInformation: {
    default: new URL('../assets/images/msg.png', import.meta.url).href,
    active: new URL('../assets/images/msg1.png', import.meta.url).href,
  },
}
// 跟踪当前index
let activeIndex = ref(sessionStorage.getItem('activeIndex') || (role == '4' ? 'HelloWorld' : '')) // 初始化时读取本地存储

// 根据index和当前激活状态，返回对应的图标
const getSrc = (index) => {
  const isActive = activeIndex.value === index
  return isActive ? iconMap[index].active : iconMap[index].default
}

// 更新activeIndex
const changeIndex = (index) => {
  //找到oneafter然后移除oneafter
  if (document.querySelector('.oneafter')) {
    document.querySelector('.oneafter').classList.remove('oneafter')
  }
  if (document.querySelector('.classoneafter')) {
    document.querySelector('.classoneafter').classList.remove('classoneafter')
  }
  if (document.querySelector('.projectoneafter')) {
    document.querySelector('.projectoneafter').classList.remove('projectoneafter')
  }

  activeIndex.value = index
  sessionStorage.setItem('activeIndex', index) // 保存到本地存储
}



function goback() {
  // 清除本地存储中的token和user信息
  sessionStorage.removeItem('activeIndex')
  router.push('/')
}
</script>
  
  
  <style scoped>
.common-layout {
  height: 100vh;
  background-color: #ffffff;
}
.common-layout .el-container {
  height: 100%;
}
.common-layout .el-header {
  min-width: 500px;
  height: 10%;
  min-height: 79px;
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between; /* 让标题和按钮分别居左右 */
  color: #201c1c;
  padding: 0 20px; /* 给左右添加内边距 */
}
.header-left {
  margin-left: 20px;
}
.logo {
  height: 50px;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-right: 40px;
  min-width: 485px;
}
.res,
.user,
.exit {
  width: 17px;
  height: 17px;
}
.user {
  margin-right: 5px;
}
.common-layout .container {
  height: 90%;
  min-height: 650px;
}

/* 侧边栏 */
.common-layout .el-aside {
  min-height: 100%;
  width: 15%;
  min-width: 192px;
}
/* 菜单文字 */
:deep(.el-menu .el-menu-item),
:deep(.el-menu .el-sub-menu__title) {
  color: black;
  padding-left: 50px !important;
  padding-right: 50px !important;
  text-align: left;
}

/* 设置菜单条背景色 */
.el-aside .el-col {
  background-color: #fff !important;
}
/* 设置悬停背景色 */
:deep(.el-menu-item:hover),
:deep(.el-sub-menu__title:hover) {
  background-color: #e7f0f7;
  border-right: 2px solid #007bff;
}
.common-layout .el-aside .el-menu .el-menu-item.is-active {
  background-color: #e7f0f7;
  border-right: 2px solid #007bff;
  color: #3e84bf;
}
.common-layout .el-aside .el-menu .is-opened {
  border-right: none;
}
.common-layout .el-aside .el-menu .is-opened .el-sub-menu__title .day {
  color: #3e84bf;
}
.el-menu-item span {
  font-size: 15px;
}
.banji,
.richang,
.yonghu,
.rizhi,
.shenhe,
.xiangmu,
.student {
  width: 15px;
  height: 15px;
  margin-right: 10px;
}
.day {
  width: 100%;
  height: 100%;
  font-size: 15px;
}
:deep(.el-menu-item-group__title) {
  height: 0;
  padding: 0;
  margin: 0;
  overflow: hidden; /* 确保内容不会溢出 */
}
/* 右边内容 */
.common-layout .el-main {
  background-color: #f5f9fa;
  min-height: 650px;
  height: 100%;
  width: 85%;
  padding: 0;
  min-width: 1000px;
  overflow: auto;
}
.common-layout .el-col {
  height: 100%;
  background-color: #545c64;
}
.oneafter {
  background-color: #e7f0f7;
  border-right: 2px solid #007bff;
  color: #3e84bf !important;
}
.classoneafter {
  background-color: #e7f0f7;
  border-right: 2px solid #007bff;
  color: #3e84bf !important;
}
.projectoneafter {
  background-color: #e7f0f7;
  border-right: 2px solid #007bff;
  color: #3e84bf !important;
}

:deep(.el-menu-item span){
  width: 100% !important;
}



</style>
  